<template>
  <div class="components-container">
    <aside>
      Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In
      the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been
      basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
      （富文本是管理后端的核心功能，但与此同时，它又是一个坑坑洼洼的地方。在选择丰富文本的过程中，我也走了很多弯路。市场上常见的富文本已基本使用，我最终选择了Tinymce。请参阅更详细的富文本比较和介绍。）
      <a
        target="_blank"
        class="link-type"
        href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html"
      >Documentation</a>
    </aside>
    <div>
      <tinymce v-model="content" :height="300" />
    </div>
    <div class="editor-content" v-html="content" />
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'

export default {
  name: 'TinymceDemo',
  components: { Tinymce },
  data() {
    return {
      content:
      // "//www.tinymce.com/images/glyph-tinymce@2x.png"
        `<h1 style="text-align: center;">欢迎来到TinyMCE演示！</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="" alt="TinyMCE Logo" width="110"/><ul>
          <li>
            我们的 <a href="//www.tinymce.com/docs/">documentation</a> 是学习如何配置TinyMCE的重要资源。
          </li>
          <li>
            有一个具体问题吗？参见 <a href="https://community.tinymce.com/forum/">社区论坛</a>.
          </li>
          <li>
            我们还提供企业级支持，作为 <a href="https://tinymce.com/pricing">TinyMCE高级订阅</a>.
          </li>
      </ul>`
    }
  }
}
</script>

<style scoped>
.editor-content {
  margin-top: 20px;
}
</style>

